<template>
  <view class="page container">
	  <image src="/static/newVer/back.png" class="backbtn" mode="widthFix" @click="back" style="width: 50rpx;"></image>
    <u-swiper :list="swiperList" :radius="0" height="750rpx"></u-swiper>
	<!-- <image src="/static/newVer/bnbg.png" mode="widthFix" style="width: 100%;"></image> -->
	<view class="mar-32 imgbg">
		<view class="priceData">
			<text class="fs-28">￥</text> <text class="fs-48">{{goodsMain.amount}}</text> <text class="fs-32">积分</text>
		</view>
		<image style="width: 100%;" src="/static/newVer/titleHeader.png" mode="widthFix"></image>
	</view>
    <view class="mar-32 titleBox  pad-16">
		
      <view class=" mb-20">
        <view class="">
			<u-text :lines="2" size="36rpx" color="#121212" :bold="true" :text="goodsMain.title || '王老吉瓶装300*12'"></u-text>          
        </view>
		<!-- <text style="font-size: 24rpx;color: #8B8B8B;">已售:999</text> -->
      </view>
	  
      
    </view>
    <view class="pad-32 bgc-fff mar-32 " style="border-radius: 24rpx;">
     
      
      
        <view style="flex: 1"><text class="c-121212">选择：</text> {{goodsMain.spec}}<text></text></view>
        <!-- <view style="flex: 1" class="mt-20"><text class="c-121212">送至：</text>河南省郑州市农业路国企中心08室 <text></text></view> -->
    
    
    </view>
	<view class="flex-center-center">
		<image style="width: 320rpx;margin: 0 auto;" src="/static/newVer/Frame 34222@2x.png" mode="widthFix"></image>
	</view>
    <view class="  mt-28">
		
      <u-parse :content="goodsMain.content"></u-parse>
	  <!-- <image src="https://serv.quweiie.cn/static/main.jpg" style="width: 100%;" mode="widthFix"></image> -->
    </view>
    <view class="bottom-box bgc-fff flex-row-center">
      <view class=" flex-center-center">
<!-- 		  <view class="flex-column-center flex-column mr-40">
		  	<image src="/static/newVer/collect.png" mode="widthFix" style="width: 48rpx;"></image>
		  	收藏
		  </view>
		<view class="flex-column-center flex-column">
			<image src="/static/newVer/shop.png" mode="widthFix" style="width: 48rpx;"></image>
			购物车
		</view> -->
      </view>
      <u-button :customStyle="btnStyle" @click="toResult">立即兑换</u-button>
    </view>
  </view>
</template>
<script>
import GoodsCard from "@/components/rowCards/GoodsCard";
import NewsCard from "@/components/rowCards/NewsCard";
import { getProductDetails, goods_collectApi } from "@/services/home";
export default {
  data() {
    return {
      btnStyle: {
        border: "none",
        background: "linear-gradient( 91deg, #E61E1E 0%, #FF6262 100%)",
        color: "#fff",
        width: "312rpx",
        height: "88rpx",
        opacity: 1,
        borderRadius: "42rpx",
        
      },
      swiperList: [],
      goods_id: '',
      goods_info: {},
      sku_list: [],
      is_collect: 0,
      shop_info: {},
	  goodsMain:{}
    };
  },
  components: { GoodsCard, NewsCard },
  onLoad(options) {
    this.goods_id = options.id;
    this.getProductDetail();
  },
  methods: {
	  back(){
		uni.navigateBack()  
	  },
    async changeCollect() {
      await goods_collectApi({
        goods_id: this.goods_id,
      });
      this.is_collect = this.is_collect == 1 ? 0 : 1;
    },
	toResult(){
		uni.navigateTo({
			url:'/pages/scoreConfirm/index?id='+this.goods_id
		})
	},
    getProductDetail() {
      getProductDetails({ id: this.goods_id }).then((res) => {
		this.goodsMain = res.data
		this.swiperList=[this.$config.domain+res.data.images]
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding-bottom: 200rpx;
  background-color: #f7f8fa;
}

.tabs {
  display: flex;
  flex-wrap: wrap;

  .tab-item {
    min-width: 96rpx;
    height: 48rpx;
    background-color: #f7f8fa;
    border-radius: 8rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 22rpx;
    margin-bottom: 22rpx;

    &-active {
      background-color: rgba(197, 38, 29, 0.1);
      color: #fff;
    }
  }
}

.bottom-box {
  padding: 24rpx 32rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.imgbg{
	position: relative;
	.priceData{
		position: absolute;
		
		z-index: 99;
		color: #fff;
		top: 10rpx;
		left: 20rpx;
	}
}
.titleBox{
	position: relative;
	background: #FFFFFF;
	border-radius: 24rpx;
	margin-top: -60rpx;
	
}
.backbtn{
	position: fixed;
	top: 100rpx;
	    z-index: 99;
	    left: 40rpx;
	
}
</style>